hexo博客搭建►博客优化

使用GitHub + Hexo搭建博客（Mac版）

安装环境

安装Node.js

从Node.js官网按其提示安装，安装成功后如下图：

安装成功的Node.js和npm都被安装到了/usr/local/bin目录下，可对其进行测试，看Node.js和npm是否可用：
查看Node.js的版本号：

1
node -v

Node.js成功安装，可看到如下类似的信息：

1
2
$ node -v 
v6.2.0

查看npm的版本号：

1
npm -v

npm成功安装，可看到如下类似的信息：

1
2
$ npm -v 
3.8.9

安装Git

Xcode自带Git，查看Git版本号：

1
git version

本地已安装git，可看到如下类似的信息：

1
2
$ git version 
git version 2.5.4 (Apple Git-61)

安装设置Hexo

安装hexo

1
sudo npm install -g hexo

查看hexo版本号

1
hexo version

创建项目

1
hexo init Hexo

进入目录（Mac版本hexo文件需搭建在user同一层，通过“工具栏”前往“上一层”进行访问）

1
cd hexo

初始化项目

1
hexo init

安装依赖包

1
npm install

启动服务（以后所有命令均在hexo文件夹下运行）

1
hexo server

用浏览器打开 http://localhost:4000/ 或者 http://127.0.0.1:4000/ 即可进行预览
推荐使用Chrome浏览器获得最佳效果

按 Ctrl+C 停止本地预览

博客部署到github

1  在终端cd进入hexo文件夹，输入以下命令安装git部署器：

1
sudo npm install hexo-deployer-git --save

2  修改根目录下的站点配置文件_config.yml，博主直接使用sublime打开hexo文件夹下的_config.yml文件，在文件末尾修改如下内容，然后保存：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/maoqiq/maoqiq.github.io.git
  branch: master

注：itwanggj改为your_username，即你的github博客仓库的网址，如下图所示：


注：在配置所有配置文件_config.yml时，所有:冒号后都要加一个”空格”

3  在hexo目录下，生成静态页面：

1
hexo generate

4  执行部署命令，如果没有关联github，执行时终端会提示输入github的用户名和密码，输入后等待执行成功：

1
hexo deploy

正在执行hexo deploy中的终端如下图所示：


hexo deploy命令执行成功后，在浏览器使用网址https://itwanggj.github.io/打开页面，与本地预览的效果相同，则部署成功，成功页面如下图所示：

使用

目录结构

1
2
3
4
5
6
7
8
9
10
11
.
├── .deploy       #需要部署的文件
├── node_modules  #Hexo插件
├── public        #生成的静态网页文件
├── scaffolds     #模板
├── source        #博客正文和其他源文件，404、favicon、CNAME 都应该放在这里
|   ├── _drafts   #草稿
|   └── _posts    #文章
├── themes        #主题
├── _config.yml   #全局配置文件
└── package.json

全局配置(_config.yml)

注：全局配置文件即为hexo根目录的_config.yml(要区别于主题文件中的_config.yml)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site #站点信息
title: GuojunWang's Blog #标题
subtitle: 王国军博客 #副标题
description: GuojunWang's blog #站点描述，给搜索引擎看的
author: 王国军 #作者
email:  #电子邮箱
language: zh-CN #语言
# URL #链接格式
url: https://itwanggj.github.io/ #网址
root: / #根目录
permalink: :year/:month/:day/:title/ #文章的链接格式
tag_dir: tags #标签目录
archive_dir: archives #存档目录
category_dir: categories #分类目录
code_dir: downloads/code
permalink_defaults:
# Directory #目录
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录
# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认的模板，包括 post、page、photo、draft（文章、页面、照片、草稿）
titlecase: false #标题转换成大写
external_link: true #在新选项卡中打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #语法高亮
  enable: true #是否启用
  line_number: true #显示行号
  tab_replace:
# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:
# Archives
2: 开启分页
1: 禁用分页
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服务器
port: 4000 #端口号
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期时间格式
date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/
time_format: H:mm:ss
# Pagination #分页
per_page: 10 #每页文章数，设置成 0 禁用分页
pagination_dir: page
# Disqus #Disqus评论，替换为多说
disqus_shortname:
# Extensions #拓展插件
theme: landscape-plus #主题
exclude_generator:
plugins: #插件，例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署，将 itwanggj 改成用户名
deploy:
  type: git
  repo: https://github.com/itwanggj/itwanggj.github.io.git

命令行的使用

常用命令行

1
2
3
4
5
6
7
8
hexo help #查看帮助
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成网页，可以在 public 目录查看整个网站的文件
hexo server #本地预览，'Ctrl+C'关闭
hexo deploy #部署.deploy目录
hexo clean #清除缓存，**强烈建议每次执行命令前先清理缓存，每次部署前先删除 .deploy 文件夹**

复合命令

1
2
hexo deploy -g
hexo server -g

命令简写

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

安装插件命令

1
2
3
npm install <plugin-name> --save
npm update #升级
npm uninstall <plugin-name> #卸载

安装主题，为主题的 git 仓库，为要存放在本地的目录名

1
git clone <repository> themes/<theme-name>

编辑文章

新建文章

1
hexo new "标题"

在 _posts 目录下会生成文件标题.md

1
2
3
4
5
6
7
8
9
title: 标题
date: 2014-11-11 11:11:11
tags:
- 标签1
- 标签2
- 标签3
categories: [分类1,分类2,分类3]
---
正文，使用Markdown语法书写

注：编辑完之后进行保存，hexo server进行预览

发布

以发布到 Github 为例

编辑全局配置文件 _config.yml 中的 deploy 部分，itwanggj为用户名

1
2
3
4
deploy:
  type: git
  repo: https://github.com/itwanggj/itwanggj.github.io.git
  branch: master

或者

1
2
3
4
deploy:
  type: git
  repository: git@github.com:itwanggj/itwanggj.github.com.git
  branch: master

部署

1
hexo d

如果出现以下提示，说明部署成功

1
[info] Deploy done: github

博客优化

配置主题

下载主题

1
git clone <repository> themes/<theme-name>

也可以手动下载后解压到 themes 目录

在全局配置文件 _config.yml 中 theme 一行改成想要的主题

主题目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.
├── languages          #国际化
|   ├── default.yml    #默认
|   └── zh-CN.yml      #中文
├── layout             #布局
|   ├── _partial       #局部的布局
|   └── _widget        #小挂件的布局
├── script             #js脚本
├── source             #源代码文件
|   ├── css            #CSS
|   |   ├── _base      #基础CSS
|   |   ├── _partial   #局部CSS
|   |   ├── fonts      #字体
|   |   ├── images     #图片
|   |   └── style.styl #style.css
|   ├── fancybox       #fancybox
|   └── js             #js
├── _config.yml        #主题配置文件
└── README.md          #主题介绍

以下是主题 landscape-plus 的配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# Header #顶部导航
menu:
  Home: / #主页
  Archives: /archives #存档
  About: /about #关于
rss: /atom.xml #RSS 订阅
# Content
excerpt_link: 阅读全文 #"Read More"要显示的文字
fancybox: true #fancybox 看图效果
# Sidebar #侧边栏
sidebar: right #位置，右边
widgets:
- weibo
- recent_posts
- recent_comments
- recent_visitors
- archive
- category
- tag
- tagcloud
#- links #在 widget 前加"#"禁用
# Links #友情链接
links:
  Hexo: http://hexo.io
# Miscellaneous
google_analytics: UA-xxxxxxxx-1 #Google Analytics ID
favicon: /favicon.ico #favicon 路径
twitter: itwanggj
google_plus: 
fb_admins: 
fb_app_id: 
# Duoshuo #多说通用代码
duoshuo_shortname:
# Baidu share #百度分享
baidushare: true

博主使用的是paperbox主题，以下是paperbox主题的配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
# Header
menu:
  Home: /
  Archives: /archives
  About: /about
rss: /atom.xml
github: https://github.com/itwanggj
logo_title: 前端
blog_title: Guojun Wang's Blog
# Content
excerpt_link: Read More
fancybox: true
mathjax: false
# Sidebar
sidebar: right
widgets:
- recent_posts
- tag
- archive
- tagcloud
- links
- categories
# Miscellaneous
wx_block: false
google_analytics:
favicon: favicon.png
twitter:
google_plus:
fb_admins:
fb_app_id:
# Duoshuo
duoshuo_shortname: itwanggj
duoshuo_share: true
# Swiftype Search
swiftype_key:

评论
在 Disqus官网 申请新网站的 shortname
配置 _config.yml 文件

1
disqus_shortname: xxxxxxxx

替换为多说，landscape-plus 已经配置好了多说，填写duoshuo_shortname即可

RSS 订阅

安装插件

1
npm install hexo-generator-feed

全局配置文件开启插件

1
2
plugins:
- hexo-generator-feed

主题配置文件添加入口

1
rss: /atom.xml

浏览http://localhost:4000/atom.xml查看是否生效

Sitemap 网站地图

安装插件

1
npm install hexo-generator-sitemap

开启插件

1
2
plugins:
- hexo-generator-sitemap

浏览http://localhost:4000/atom.xml查看是否生效

文章摘要

在摘要内容后面插入

1
<!--more-->

可以在主题的配置文件中设置要显示的文字

1
excerpt_link: 阅读全文

图片显示

把图片放到 source/images 目录下

1
![](images/xxx.jpg)

自定义页面

以关于我的页面为例

1
hexo new page "about"

编辑 source/about/index.md：

1
2
3
4
title: About
date: 2016-02-01 11:11:11
---
About Me

在主题的配置文件里添加入口

1
2
menu:
  About: /about

添加小图标

将 favicon.ico 文件放在 source 目录下
配置 landscape-plus 主题里的 _config.yml

1
favicon: /favicon.ico

添加”fork me on github”

官方教程
将代码插入到 layout.ejs